<template>
  <div class="home">
    <div class="header">
      <div class="header_lead">
        <div class="header_lead_logo"></div>
        <span class="title">G-UI</span>
      </div>
      <div class="header_tail">
        <a @click="changeTheme">
          <g-icon :name="isWhiteTheme? 'yejianmoshi' : 'taiyang'" />
        </a>
      </div>
    </div>
    <div class="main">
      <div class="sidebar">
        <ul>
          <div
            :key="item_1.title"
            class="nav-item-wrap"
            v-for="item_1 in ul_data"
          >
            <a>{{ item_1.title }}</a>
            <ul class="pure-menu-list" v-if="item_1.li_data.length != 0">
              <li
                :key="item_2.path"
                :class="{ active: active == item_2.path }"
                v-for="item_2 in item_1.li_data"
              >
                <a :href="item_2.path" @click="active = item_2.path">
                  {{ item_2.name }}
                </a>
              </li>
            </ul>
          </div>
        </ul>
      </div>
      <div class="content" id="router_view_box">
        <router-view />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Home",
  data() {
    return {
      // 默认选中路由
      active: "#/component/installation",
      // 左侧菜单
      ul_data: [
        {
          title: "开发指南",
          li_data: [
            { name: "安装/快速上手", path: "#/component/installation" },
            { name: "自定义主题", path: "#/component/theme" },
          ],
        },
        {
          title: "基础组件",
          li_data: [
            {
              name: "Icon 图标",
              path: "#/component/icon",
            },
            {
              name: "Button 按钮",
              path: "#/component/button",
            },
            // {
            //   name: '虚拟滚动',
            //   path: '#/component/scrollList',
            // },
            // {
            //   name: 'Timer 计时器',
            //   path: '#/component/timer',
            // },
          ],
        },
        {
          title: "表单组件",
          li_data: [
            {
              name: "Checkbox 多选框",
              path: "#/component/checkBox",
            },
            {
              name: "TimePicker 时间选择器",
              path: "#/component/timePicker",
            },
          ],
        },
        {
          title: "数据展示",
          li_data: [
            {
              name: "Tree 树形控件",
              path: "#/component/tree",
            },
            {
              name: "PictureView 图片预览器",
              path: "#/component/pictureView",
            },
          ],
        },
      ],
      // 是否为白色主题
      isWhiteTheme: true,
      sidebarHover: false,
    };
  },
  watch: {
    $route: function (to, from) {
      if (from.path != to.path) {
        document.documentElement.scrollTop = 0;
      }
    },
  },
  mounted() {
    this.active = "#" + this.$route.path;
  },
  methods: {
    // 设置主题
    changeTheme() {
      this.isWhiteTheme = !this.isWhiteTheme;
      if (this.isWhiteTheme) {
        document.documentElement.removeAttribute("theme");
      } else {
        document.documentElement.setAttribute("theme", "dark");
      }
    },
  },
};
</script>
<style lang="scss" scoped>
@import "./Home.scss";
</style>
